<template>
    <div class="mr-root">
        <div class="top">
        <h2 class="title">{{lis.title}}</h2><br/>
        <span class="create-at">发布于:{{lis.create_at | number}}</span>
        <span>作者:{{lis.author.loginname}}</span>
         <span class="visit"> {{lis.visit_count}}次浏览</span>
         <div class="xian"></div>
        <div class="tex" v-html="lis.content"></div>
        </div>
        <div class="lianjie"> 
            <div class="lala" v-for="r in rep">
                <img class="la" :src="r.author.avatar_url" alt="">
                <div class="name">
                <span class="">{{r.author.loginname}}&#x3000;</span>
                <span class="last">{{r.create_at | number}}</span>
                </div>
                <div class="texte" v-html="r.content"></div>
            </div>
        </div>
         <div class="loadMore"  v-if="!showLoading"><span class="load" @click="loadMore">谢谢观看~</span></div>
        </div>
</template>
<script>
    export default {
        data() {
            return {
                lis: {},
                rep: []
            }
        },
        created() {
            this.axios.get(`http://www.vue-js.com/api/v1/topic/${this.$route.params.id}`)
                .then(data => {
                    this.lis = data.data.data
                    this.rep = data.data.data.replies
                })
                .catch(err => {})
        }
    }
</script>
<style scoped>
    .mr-root {
        margin-top: -35px;
    }
    
    .xian {
        width: 95%;
        border-top: 1px solid #ccc;
        margin: .3rem auto;
    }
    
    .top {
        background: white;
        width: 96%;
        margin: .2rem auto;
        border-radius: 10px;
        padding: .2rem;
        overflow: hidden;
    }
    
    .lianjie {
        width: 96%;
        margin: 0 auto;
    }
    
    .lala {
        border: 1px solid #ccc;
        border-radius: 10px;
        margin: .1rem;
        padding: .1rem;
        position: relative;
        background: white;
    }
    
    .la {
        width: 1rem;
        border: 1px solid #ccc;
        border-radius: 50%;
    }
    
    .texte {
        margin-left: 1rem;
    }
    
    .name {
        position: absolute;
        top: .5rem;
        left: 1.2rem;
    }
</style>